<template>
  <div class="wrap">
    <div v-for="(item, index) in state.currentCar" :key="index" class="card">
      <div class="bb item-title">
        <table style="width: 100%;">
          <tbody>
          <tr>
            <td><span style="color: grey;">装车日期：</span><span>{{item.billDate}}</span></td>
            <td><span style="color: grey;">司机：</span><span>{{item.deliverNames}}</span></td>
            <td><span style="color: grey;">送货单号：</span><span>{{item.billNo}}</span></td>
            <td style="width: 400px;">
              <JButton   size="small" type="info" v-if="item.stat='待确认'" @click="print(item)">票据打印</JButton >
              <JButton  style="margin-left: 30px;" size="small" type="info" v-if="item.stat='待确认'" @click="confirmCargo(item)">确认送货</JButton >
              <JButton  style="margin-left: 30px;" size="small" type="danger" v-if="item.stat='待确认'" @click="delCargo(item)">整单删除</JButton >
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="undeliver" style="display: flex;width: 100%;margin-top: 5px;">
        <div style="flex: 1;">
          <table style="width: 100%;">
            <thead>
            <tr>
              <th class="tc  br bb" style="width: 50px;">操作</th>
              <th class="tc  br bb" style="width: 130px;">销售票号</th>
              <th class="tc  br bb" style="width: 100px;">开票日期</th>
              <th class="tc  br bb" >客户</th>
              <!--                  <th class="tc  br bb" >送货地址</th>-->
            </tr>
            </thead>
            <tbody>
            <tr v-for="(it, inx) in item.infos" :key="inx">
              <td   class="  br" style="text-align: center;"><tiny-link @click="delItem(it)">删除</tiny-link></td>
              <td   class="  br">{{ it.billNo }}</td>
              <td   class="  br" style="text-align: center;">{{  it.billDate}}</td>
              <td   class="  br" style="text-align: left;">{{  it.buName}}</td>
              <!--                  <td   class="  br" style="text-align: left;">{{  it.address}}</td>-->
            </tr>
            </tbody>
          </table>
        </div>
        <div style="flex: 1;">
          <table style="width: 100%;">
            <thead>
            <tr>
              <th class="tc  br bb">商品名称</th>
              <th class="tc  br bb" style="width: 80px;">数量 </th>
              <th class="tc  br bb" style="width: 60px;">单位</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(it, inx) in item.goods" :key="inx">
              <td   class="  br" style="text-align: left;">{{ it.invName }}</td>

              <td   class="  br" style="text-align: right;font-size: 16px;padding-right: 10px;">{{  it.qty}}</td>
              <td   class="  br" style="text-align: center;">{{  it.unit}}</td>
            </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>
    <doprint ref="doprintRef"></doprint>
  </div>

</template>
<script setup>
// 待配送列表明细
import Doprint from "@/views/ps/doprint.vue";
import tool from "@/utils/tool";
const route = useRoute()
import {onBeforeMount, ref} from "vue";
import {useRoute} from "vue-router";
const state = ref({
  title: '',
  usr: {},
  carList: [],
  height: window.innerHeight - 20,
  tabHis: false,
  currentCar: {}, // 当前选中车辆
  item: {}
})

const doprintRef = ref(null)

onBeforeMount(() => {
  let item =  route.query.item
  item = JSON.parse(item)
  state.value.item = item
  state.value.title = '配送详情'
  getCar()
})
const getCar = () => {
  tool.post('justdeliver/getCargoDetail', {deliverNames: state.value.item.deliverNames}, true).then(ret => {
    if(ret.stat) {
      state.value.currentCar = []
      ret.data.map(row => {
        state.value.currentCar.push(row)
      })
    }
  })
}
// 整单删除
const delCargo = (item) => {
  tool.confirm('确认删除本张派车单？', '删除提示').then(() => {
    tool.post('justdeliver/delCargo', {cargoId: item.id}).then(ret => {
      if (ret.stat) {
        getCar()
      }
    })
  })
}
// 删除装车单中的一条
const delItem = ( it) => {
  tool.confirm('确认删除该装车单中的票据？', '删除提示').then(() => {
    tool.post('justdeliver/delDetailCargoItem', it).then(ret => {
      if (ret.stat) {
        getCar()
      }
    })
  })
}
// 确认送货
const confirmCargo = (item) => {
  tool.confirm('确认送货完成。', '送货提示').then(() => {
    tool.post('justdeliver/confirmCargo', {cargoId: item.id}, true).then(ret => {
      if (ret.stat) {
        getCar()
      }
    })
  })
}
// 打印
const print = (item) => {
  doprintRef.value.print(item.id)
}

</script>
<style scoped lang="scss">

table {
  border-collapse: collapse;
}
.wrap {
  padding: 5px;height: calc(100vh - 10px);overflow: auto;
  background: #b3c0d1;
}
.undeliver td, th {
  padding: 5px 3px;
  background-color: white;
  font-size: 14px;
  border: 1px solid #b3c0d1;
}
.card {
  border: 1px solid #AAB2BD;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  background: white;
}
</style>
